<template>
  <div class="blog-article--info">
    <h3 class="blog-item--title">{{ info.title }}</h3>
    <div class="blog-item--author"><SvgIcon class="el-icon-s-custom article-icon" name="user" />作者: {{ info.nickName }}</div>
    <div class="blog-item--date"><SvgIcon class="el-icon-timer article-icon" name="time"/> 创建时间: {{ info.date }}</div>
    <div class="blog-btn--article visible-xs">
      <span class="blog-info--item">
        <SvgIcon  name="like" :class="{ 'el-icon-star-off': true, ' article-icon': true }" :color="isLikeState ? '#e6a23c' : ''"
        @click="changeLikes"/>{{ Math.max(likeNum, 0) }}
      </span>
      <span class="blog-info--item"> <IEpView class="el-icon-view article-icon" /> {{ info.hits }} </span>
      <span class="blog-info--item">
        <SvgIcon class="el-icon-edit-outline article-icon" name="edit" /> {{ info.conment_num }}
      </span>
    </div>
  </div>
</template>

<script setup lang="ts">
/*
  改变like的点赞数量
  1. 点击后, 将组件的数据进行改变, 在true和false中改变, 展现的值为true or false的转变的数字改变
  2. 修改数据库的内容, 在组件销毁之前想http服务端发起请求
    4中常用的页面生命周期
      DOMConentLoaded: 页面dom加载完成, 不包括img, link加载
      load 包含所有的加载, 例如img的加载, js文件
      unload 在页面离开时触发
      beforeunload 页面关闭时触发


  一来通过like_num获取like的数量, 然后观察是否点赞, 根据getters传入aid观察, 如果点赞, 就点量
  如果一来没有点亮, 点击按钮, 就想vuex调用方法, 添加文章列表, 每次都想服务端传递信息
  如果一来没有点亮, 点击按钮, 就用vuex调用方法, 删除文章列表

*/
// window.addEventListener('DOMContentLoaded', function () {
//   console.log('DOMContentLoaded')
// })
// window.addEventListener('load', function () {
//   console.log('load');
// })
// window.addEventListener('unload', function () {
//   console.log('unload')
//   this.localStorage.setItem('a', 1)
// })
// window.addEventListener('beforeunload', function () {
//   console.log('beforeunload')
//   this.localStorage.setItem('a', 2)
// })

import { ref, computed, onMounted, onBeforeUnmount } from 'vue'

import { useLike } from '@/store/like'
import { $bus } from '@/unit/mitt'
let props = defineProps<{
  info: {
    title: string
    nickName: string
    likes: number
    hits: number
    conment_num: number
    date: any
    id: string
    like_users: any
  }
}>()

let virActive = ref<number>(0)
let like = useLike()

let aid = computed(() => {
  return props.info.id
})
let likeNum = computed(() => {
  return props.info.likes + virActive.value
})
let isLikeState = computed(() => {
  return like.isLike(aid.value)
})

onMounted(() => {
  $bus.on('changeLikes', changeLikes)
})

function changeLikes() {
  // 虚拟技术器, 如果点击就取反
  // this.choice();
  // 只用中间数字进行加减
  virActive.value += isLikeState.value ? -1 : 1
  ;(isLikeState.value ? like['pullLike'] : like['pushLike'])({ aid: aid.value })
  // 相当于所有内容都与store绑定完成, 如果store清除, 就表示按钮, 以及数字显示未0, 就又可以点赞了, 所以点赞完成后, 发起具体的操作, 总体控制是否点赞, 有store决定
  like?.sendHttpLike({ aid: aid.value })
}
onBeforeUnmount(() => {
  // TODO 统一处理eventBus
  $bus.off('changeLikes', changeLikes)
})
</script>
<style lang="less" scoped>
@import url('@/assets/css/variable.less');

.article-icon {
  width: @font-size-p;
  height: @font-size-p;
}

.typo .blog-item--title {
  font-size: @font-size-p * 2;
}

.typo .blog-article--info {
  & .blog-item--author {
    margin-left: @padding-space * 8;
    text-align: left;

    & .el-icon-s-custom {
      margin-right: @padding-space - 2;
    }
  }

  & .blog-item--date {
    margin-left: @padding-space * 6;
    text-align: left;
  }
}


</style>
